<template>
	<view>
		<uni-search-bar placeholder="搜索群号/群名称" :radius="100" bgColor="#eeeeee" v-model="keyword" 
			@cancel="doClear"
			@clear="doClear"
		></uni-search-bar>
		<uni-list v-if="groupList.length">
			<uni-list-chat v-for="(item,index) in groupList" :key="index" 
				:title="item.group_info.name"
				@click="toChat(item.group_info._id)"
				:avatar="item.group_info.avatar_file&&item.group_info.avatar_file.url ? item.group_info.avatar_file.url : '/uni_modules/uni-im/static/avatarUrl.png'">
			</uni-list-chat>
		</uni-list>
		<uni-load-more v-else :status="groupList?'noMore':'loading'"></uni-load-more>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				groupData:false,
				isWidescreen:false
			}
		},
		computed: {
			groupList() {
				let groupList = this.$store.state.uniIm.groupList || []
				if(this.keyword){
					return groupList.filter(item=>{
					  return item.group_info.name.includes(this.keyword) || item.group_info._id.includes(this.keyword)
					})
				}else{
					return groupList
				}
			}
		},
		onLoad() {
			
		},
		mounted() {
			// #ifdef H5
			const mediaQueryOb = uni.createMediaQueryObserver(this)
			mediaQueryOb.observe({
				minWidth: 960
			}, matches => {
				this.isWidescreen = matches;
			})
			// #endif
		},
		methods: {
			doClear(){
				this.keyword = ''
			},
			toChat(group_id) {
				let conversation_id = 'group_' + group_id
				// console.log('toChat',{conversation_id,'isWidescreen':this.isWidescreen});
				uni.navigateTo({
					url: '/uni_modules/uni-im/pages/index/index?conversation_id=' + conversation_id,
					animationDuration: 300,
					fail: (error1) => {
						uni.switchTab({
							url: '/uni_modules/uni-im/pages/index/index?conversation_id=' + conversation_id,
							animationDuration: 300,
							fail: (error2) => {
								console.error(error1,error2);
							}
						})
					}
				})
				
			},
		}
	}
</script>

<style>

</style>
